<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>捕获冒泡</title>
</head>
<body>
    <div class="grandma">奶奶
        <div class="mother">妈妈
            <div class="daughter">女儿
                <div class="baby">婴儿</div>
            </div>
        </div>
    </div>
    <div style="width:800px;color:black;text-align: left;margin: 20px;">
        解释：
        <div>1.首先定位所点击的dom的位置，以该位置为目标。</div>
        <div>2.判断各个dom的事件类型。</div>
        <div>3.列出捕获事件，事件将从上到下至目标dom依次触发。</div>
        <div>4.列出冒泡事件，事件将从目标dom开始从下向上触发。</div>
    </div>
    <script>
        var grandma=document.getElementsByClassName('grandma')[0]
        var mother=document.getElementsByClassName('mother')[0]
        var daughter=document.getElementsByClassName('daughter')[0]
        var baby=document.getElementsByClassName('baby')[0]

        function ouputName(){console.log('我是'+this.className)}
        grandma.addEventListener('click',ouputName,true) //捕获
        mother.addEventListener('click',ouputName,false) //冒泡
        daughter.addEventListener('click',ouputName,true) //捕获
        baby.onclick=ouputName //默认冒泡
    </script>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .grandma{
            background-color: brown;
            width: 600px;
            color: aliceblue;
            text-align: center;
            padding: 20px;
            font-size: 30px;
        }
        .mother,.daughter,.baby{
            width: 90%;
            margin:0 auto;
            color: aliceblue;
            text-align: center;
            padding: 20px;
            font-size: 30px;
        }
        .mother{
            background-color:aquamarine;
            width: 90%;
        }
        .daughter{
            background-color: burlywood;
        }
        .baby{
            background-color:cornflowerblue;
        }
    </style>
</body>
</html>